<template>
  <div class="app-container df-col">
    <div class="title"><span class="left">🎃</span><span class="right">🎃</span></div>
    <div class="drag df1">
      <div class="df-center"
           @drop.prevent="onDrop"
           @dragover.prevent="onDropOver"
           @dragleave.prevent="onDropLeave"
           @dblclick="showMainWindow">
        <i class="iconfont icon-upload-pic fs30" :class="[drop ? 'cFFF' : 'c999']"></i>
      </div>
      <i class="del-btn iconfont icon-add" @click="close" title="最小化"></i>
    </div>
  </div>
</template>

<style scoped lang="scss" rel="stylesheet/scss">
  .app-container {
    position: relative;
    .title{
      -webkit-app-region: drag;
      text-align: center;
      user-select: none;
      span {
        font-size: 18px;
        display: inline-block;
        &.left {
          transform: rotate(-45deg);
        }
        &.right {
          transform: rotate(45deg);
        }
      }
    }
    .drag {
      position: relative;
      top: -3px;
      div {
        margin: 0 auto;
        width: 70px;
        height: 70px;
        border: 1px solid $primary;
        border-radius: 50%;
        background-color: rgba(34, 215, 187, 0.8);
        cursor: pointer;
      }
      .del-btn {
        top: 55px;
        right: 0;
        position: absolute;
        color: red;
        transform: rotate(45deg);
        font-size: 20px;
        z-index: 2;
        cursor: pointer;
      }
    }
  }
</style>

<script type="text/babel">
  import {mapGetters, mapActions} from 'vuex'

  export default {
    beforeRouteEnter(to, from, next) {
      next()
    },
    beforeRouteLeave(to, from, next) {
      next()
    },
    components: {},
    data() {
      return {
        showTitle: false,
        drop: false,
      }
    },
    watch: {},
    computed: {},
    methods: {
      onDrop (e) {
        this.drop = false

        let files = Array.from(e.dataTransfer.files)
        let filesArr = this.$utils.formatFileObj(files)

        this.$electron.ipcRenderer.send('drag-file-from-mini', filesArr)
      },
      onDropOver () {
        this.drop = true
        this.showMainWindow()
      },
      onDropLeave () {
        this.drop = false
      },
      showTitleAction (e, status) {
        this.showTitle = status
      },
      showMainWindow () {
        this.$electron.ipcRenderer.send('show-main-window')
      },
      close () {
        this.$electron.ipcRenderer.send('hide-mini-window')
      }
    },
    mounted() {
      this.$electron.ipcRenderer.send('set-miniwin-position', window.screen.width)
      this.$electron.ipcRenderer.on('show-title', this.showTitleAction)
    },
  }
</script>

